<template>
    <section class="QuestionDetails-box">
        <app-header></app-header>
        <!--中间内容-->
        <div class="content">
            <div class="container">
                <a-breadcrumb>
                    <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/Question">百科-常见问题</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>详情页</a-breadcrumb-item>
                </a-breadcrumb>
                <a-row :gutter="48" class="main-content">
                    <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="left-box">
                        <div class="inside" v-show="!noDataShow">
                            <h1>{{ isNull0(DetailsData.title) }}</h1>
                            <p>
                                <span><i class="iconfont icon-fabushijian"></i> {{ momentFormat(DetailsData.createTime, 'YYYY-MM-DD') }}</span>
                                <span><i class="iconfont icon-source"></i> {{ isNull0(DetailsData.source) }}</span>
                                <span><i class="iconfont icon-yanjing2"></i> {{ isNull0(DetailsData.pageView) }}</span>
                            </p>
                            <aside>
                                <i class="iconfont icon-baojiaquotation2 leftTop"></i>
                                <p>{{ isNull0(DetailsData.description) }}</p>
                                <i class="iconfont icon-baojiaquotation rightBottom"></i>
                            </aside>
                            <div class="question-content" v-html="isNull0(DetailsData.content)"></div>
                        </div>
                        <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>

                        <!--展会活动报名框-->
                        <exhibitionsignUp></exhibitionsignUp>
                    </a-col>
                    <!--公共页面主体的右侧内容-->
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box">
                        <rightList :msgType="5"></rightList>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import exhibitionsignUp from '../../components/exhibitionsignUp.vue';//公共组件——展会活动报名框
    import rightList from '../../components/rightList.vue';//公共组件——页面主体的右侧内容
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                questionId: this.$route.query.QuestionId,   //详情Id
                DetailsData: {},    //详情数据
                noDataShow: false,  //没有数据提示信息是否显示

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取百科常见问题详情数据
            this.getQuestionDetailsData();
        },
        methods: {
            // 获取百科常见问题详情数据
            getQuestionDetailsData() {
                this.$get('/news/detail/'+ this.questionId).then(res => {
                    if (res.status === 0) {
                        this.DetailsData = res.data;
                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;

                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                })
            },
        },
        components: {
            'app-header': Header,//公共组件——头部
            exhibitionsignUp,//公共组件——展会活动报名框
            rightList,//公共组件——页面主体的右侧内容
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .QuestionDetails-box {
            background: #f5f5f5;
            .content {
                padding: 30px 0;
                > .container {
                    padding: 0;
                    >.main-content {
                        padding: 40px 0 0 0;
                        > .left-box {
                            padding: 0;
                            background: #fff;
                            > .inside {
                                padding: 40px;
                                background: #fff;
                                > h1 {
                                    font-size: 25px;
                                    color: #38485a;
                                    font-weight: bold;
                                    margin: 10px 0;
                                }
                                > p {
                                    margin: 20px 0;
                                    color: #00aced;
                                    > span {
                                        margin: 0 0 0 20px;
                                        cursor: pointer;
                                    }
                                    > span:first-of-type {
                                        margin: 0;
                                    }
                                }
                                > aside {
                                    margin: 20px 0;
                                    padding: 40px;
                                    position: relative;
                                    background: #f8f8f8;
                                    z-index: 4;
                                    > i {
                                        font-size: 30px;
                                    }
                                    > i.leftTop {
                                        position: absolute;
                                        left: 10px;
                                        top: 0;
                                        z-index: 5;
                                    }
                                    > p {
                                        font-size: 16px;
                                        line-height: 30px;
                                        margin-bottom: 0px;
                                        > span {
                                            margin: 0 0 0 20px;
                                        }
                                        > span:first-of-type {
                                            margin: 0;
                                        }
                                    }
                                    > i.rightBottom {
                                        position: absolute;
                                        right: 10px;
                                        bottom: 0;
                                        z-index: 5;
                                    }
                                }
                                .question-content {
                                    p{
                                        margin-bottom: 0;
                                    }
                                    img {
                                        display: inline-block;
                                        width: 100%;
                                        height: auto;
                                        margin-top: 30px;
                                        margin-bottom: 30px;
                                        margin-left: auto;
                                        margin-right: auto;
                                    }
                                }
                            }

                        }
                        /* 右侧列表——广告轮播位，推荐房源，热门资讯，客户留言 */
                        > .right-box {
                            > .inside {
                                background: #fff;
                                padding: 15px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
